<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美滋滋饮品公司管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>会员管理</cite></a>
			<a><cite>轮播列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>
		<button class="layui-btn"
			onclick="admin_add('添加轮播图','banner_add.html','600','500')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		<span class="x-right" style="line-height: 40px">共有数据：88 条</span></xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th><input onclick="selAll(this)" type="checkbox" name="" value=""></th>
					<th>ID</th>
					<th>排序</th>
					<th>缩略图</th>
					<th>描述</th>
					<th>显示状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="table_banner">

			</tbody>
		</table>

		<div id="page"></div>
	</div>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
	var $=null;
    var layer=null;
    var laypage=null;
        layui.use(['element','layer','form','laypage'], function(){
            $ = layui.jquery;//jquery      
         	layer = layui.layer;//弹出层
         	laypage=layui.laypage;
			$(function(){//页面加载事件
				
				selbanner();
			});
        })
		
		
		function selbanner(){
		
			 $("#table_banner").html("");
			//相对路劲，就是相对于自身位置的路径
			//../代表返回上一级
			$.post("../adminBanner?reqName=getBanner",{},function(res){
				for(i=0;i<res.length;i++){//遍历数据
					//向id为table_banner的tbody中添加tr
					//``是模板字符串，好处是在中间不考虑单引号和双引号的冲突问题
					$("#table_banner").append(`
							<tr>
							<td>
							     <input type="checkbox" value="1" name="">
							 </td>
							<td>${res[i].bannerId}</td>
							<td>
								${i+1}
							</td>
							<td>
							     <img src="../${res[i].bannerImg}" width="200" alt="">点击图片试试
							 </td>
							<td>
							     十月活动轮播
							</td>
							<td class="td-status"><span
								class="layui-btn layui-btn-normal layui-btn-mini"> 已显示 </span></td>
							<td class="td-manage"><a style="text-decoration: none"
								onclick="banner_stop(this,'10001')" href="javascript:;"
								title="不显示"> <i class="layui-icon">&#xe601;</i>
							</a> <a title="编辑" href="javascript:;"
								onclick="banner_edit('编辑','banner-edit.html', ${res[i].bannerId},'','510')"
								class="ml-5" style="text-decoration: none"> <i
									class="layui-icon">&#xe642;</i>
							</a> <a title="删除" href="javascript:;" onclick="banner_del(this, ${res[i].bannerId})"
								style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
							</a></td>
						</tr>
							`);
				}
			},"json");//将res转化为json对象
		}
		
		
		 /*添加*/
        function admin_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
    	//设置全选全不选
        function selAll(obj){
       	var checked=$(obj).prop("checked");//得到表头中的复选框是否被选中
       	$("#table_banner input:checkbox").prop("checked",checked);
        }
		 
      //批量删除提交
        function delAll () {
       	var chks=$("#table_banner input:checkbox:checked");//获得所有被选中的复选框 产生的是个数组
           if (chks.length==0) {
				alert("勾选有效的复选框");
				return false;
			}
       	layer.confirm('确认要删除吗？',function(index){
       		var ids=[];
       		for (var i = 0; i < chks.length; i++) {
					var abc=$(chks[i]).parent().next().html();
					ids.push(abc);
				}
       		$.post("../adminBanner?reqName=delBannerByIds",{
       			ids: ids.join(",")//将数组变成字符串
       		},function(res){
       			if (res.success) {
       				 //捉到所有被选中的，发异步进行删除
                       layer.msg('删除成功', {icon: 1});
                       selbanner();
					} else {
						//捉到所有被选中的，发异步进行删除
	                    layer.msg('删除失败', {icon: 1});
					}
       		},"json");
               
           });
        }
		
		/*停用*/
		function banner_stop(obj, id) {
			layer
					.confirm(
							'确认不显示吗？',
							function(index) {
								//发异步把用户状态进行更改
								$(obj)
										.parents("tr")
										.find(".td-manage")
										.prepend(
												'<a style="text-decoration:none" onClick="banner_start(this,id)" href="javascript:;" title="显示"><i class="layui-icon">&#xe62f;</i></a>');
								$(obj)
										.parents("tr")
										.find(".td-status")
										.html(
												'<span class="layui-btn layui-btn-disabled layui-btn-mini">不显示</span>');
								$(obj).remove();
								layer.msg('不显示!', {
									icon : 5,
									time : 1000
								});
							});
		}

		/*启用*/
		function banner_start(obj, id) {
			layer
					.confirm(
							'确认要显示吗？',
							function(index) {
								//发异步把用户状态进行更改
								$(obj)
										.parents("tr")
										.find(".td-manage")
										.prepend(
												'<a style="text-decoration:none" onClick="banner_stop(this,id)" href="javascript:;" title="不显示"><i class="layui-icon">&#xe601;</i></a>');
								$(obj)
										.parents("tr")
										.find(".td-status")
										.html(
												'<span class="layui-btn layui-btn-normal layui-btn-mini">已显示</span>');
								$(obj).remove();
								layer.msg('已显示!', {
									icon : 6,
									time : 1000
								});
							});
		}
		
		// 编辑
		function banner_edit(title, url, id, w, h) {
			sessionStorage.setItem("banId",id);
			x_admin_show(title, url, w, h);
		}
		/*删除*/
		function banner_del(obj, id) {
			layer.confirm('确认要删除吗？', function(index) {
				//发异步删除数据
				$.post("../adminBanner?reqName=deleteBanner",{
					bannerId: id
				},function(res){//res是服务器返回的参数
					if(res.success){//删除成功
						layer.msg(res.message,{icon:1,time:2000});
						$(obj).parents("tr").remove();
						
					}else{//删除失败
						layer.msg(res.message,{icon:1,time:2000});
					}
				},"json")

			});
		}
	</script>

</body>
</html>